import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";

const getPieDataByType = type => {
  switch (type) {
    case "huan": {
      return {
        radius: ["45%", "75%"],
        label: {
          normal: {
            show: false,
            position: "center"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold"
            }
          }
        }
      };
    }
    default: {
      return {
        radius: "75%",
        label: {
          show: true,
          normal: {
            show: true,
            position: "outer"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold"
            }
          }
        }
      };
    }
  }
};
const PieChart = ({
  title = "数据展示",
  name = "",
  data = []
}) => {
  // 改变主题
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  // 改变展示类型 环形图/饼状图
  const [pieType, chengePieType] = useState("bing");

  const getOption = data => {
    const typeDate = getPieDataByType(pieType);
    return {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        feature: {
          mytool1: {
            show: true,
            title: "环形图",
            onclick: function() {
              chengePieType("huan");
            },
            icon:
              "path://M512 0C229.517241 0 0 229.517241 0 512S229.517241 1024 512 1024 1024 794.482759 1024 512 794.482759 0 512 0z m17.655172 35.310345c247.172414 10.593103 448.441379 211.862069 459.034483 459.034483h-176.551724c-7.062069-151.834483-130.648276-271.889655-282.482759-282.482759V35.310345z m247.172414 476.689655c0 144.772414-120.055172 264.827586-264.827586 264.827586S247.172414 656.772414 247.172414 512 367.227586 247.172414 512 247.172414s264.827586 120.055172 264.827586 264.827586zM512 988.689655C250.703448 988.689655 35.310345 773.296552 35.310345 512 35.310345 257.765517 240.110345 45.903448 494.344828 35.310345v176.551724c-158.896552 10.593103-282.482759 137.710345-282.482759 300.137931 0 165.958621 134.17931 300.137931 300.137931 300.137931 74.151724 0 144.772414-28.248276 197.737931-74.151724l123.586207 123.586207C748.57931 939.255172 635.586207 988.689655 512 988.689655z m346.041379-151.834483l-123.586207-123.586206c45.903448-49.434483 74.151724-112.993103 77.682759-183.613794h176.551724c-7.062069 120.055172-52.965517 225.986207-130.648276 307.2z"
          },
          mytool2: {
            show: true,
            title: "饼状图",
            onclick: function() {
              chengePieType("bing");
            },
            icon:
              "path://M512 0C229.517241 0 0 229.517241 0 512S229.517241 1024 512 1024 1024 794.482759 1024 512 794.482759 0 512 0z m17.655172 35.310345c247.172414 10.593103 448.441379 211.862069 459.034483 459.034483H529.655172V35.310345z m-17.655172 953.37931C250.703448 988.689655 35.310345 773.296552 35.310345 512 35.310345 257.765517 240.110345 45.903448 494.344828 35.310345v469.627586c-3.531034 7.062069-3.531034 14.124138 3.531034 21.186207l335.448276 335.448276C748.57931 939.255172 635.586207 988.689655 512 988.689655z m346.041379-151.834483L550.841379 529.655172H988.689655c-7.062069 120.055172-52.965517 225.986207-130.648276 307.2z"
          },
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {},
          restore: {}
        }
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: data.map(item => item.name)
      },
      series: [
        {
          name: name,
          type: "pie",
          radius: typeDate.radius,
          center: ["50%", "60%"],
          data: data.map(item => ({
            value: parseFloat(item.votecount),
            name: item.name
          })),
          label: typeDate.label,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ReactEcharts theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default PieChart;
